<template>
  <div>
    <div v-if="systom.ERP == 1">
      <div v-if="$store.state.user.systom == ''" class="app-container" style="background: #f3f3f4">
        <el-container class="showHome">
          <el-main>
            <!-- _图标标题栏 -->
            <!-- <div style="height: 111px"> -->
            <div style="height: 150px" class="head-item">

              <el-card v-for="(item, index) in head" :key="index" class="box-card" :style="getStyle(index)">

                <!-- _图标 -->
                <div @click="toPage(item.path)"
                  style="width: 25%; margin-left: 10%; float: left; margin-top: 10px; background-color: transparent;">
                  <!-- <el-image :src="item.img" width="80px" height="80px" /> -->
                  <img :src="item.img" style="width: 100%; height: 100%;" alt="">
                </div>
                <!-- _标题名称 -->
                <div style="float: left; width: 55%; margin-left: 10%; font-size: 16px; background: transparent;">
                  <div @click="toPage(item.path)" style="margin: 24px 0 12px; font-size: 20px; font-weight: bold;"> {{
                    item.number }}</div>
                  <span class="head" @click="toPage(item.path)" style="cursor: pointer">{{ item.label }}</span>
                </div>
                <!-- _点击事件 -->
                <div class="span" @click="toPage(item.path)" style="cursor: pointer">
                  {{ item.number }}
                </div>

              </el-card>

            </div>

            <!-- _常用功能 -->
            <div style="
            width: 99%;
            /* height: 200px; */
            height: 181px;
            margin: 10px 0 10px 0;
            background: #fff;
            border-radius: 5px;
            color: rgb(51, 51, 51);
          ">
              <div style="height: 40px; padding: 14px 16px 0 16px">
                <span
                  style="float: left;margin: 0 12px; background-color: #1890FF ;width: 12px; height: 18px;border-radius: 6px;color: #1890FF;">1</span>
                <span style="float: left; font-size: 16px; font-weight: bold">常用功能</span>
                <!-- <i class="el-icon-edit" style="float: right" /> -->
                <!-- <img :src=more style="float: right;width: 18px;height: 18px;" alt=""> -->
                <img src="../../assets/imgs/more.png" style="float: right;width: 18px;height: 18px;cursor: pointer;"
                  alt="">
              </div>

              <!-- _常用功能 -->
              <div class="bodyContent" style="height: 200px;">
                <div v-for="(item, index) in head2" :key="index" class="box-card2">
                  <a href="#">
                    <i :style="{
                      backgroundImage: 'url(' + item.img + ')',
                      display: 'block',
                      float: 'left',
                      backgroundRepeat: 'no-repeat',
                      backgroundSize: 'cover',
                      // width: '32px',
                      // height: '36px',
                      width: '48px',
                      height: '48px',
                      margin: '0px auto'
                    }" @click="toPage2(item.path)" />
                    <!-- <span style="margin: 10px 15px" @click="toPage2(item.path)">{{item.label}}</span> -->
                  </a>
                  <div style="text-align: center;margin: 12px 0;" @click="toPage2(item.path)">{{ item.label }}</div>
                </div>
              </div>

            </div>

            <div style="width: 99%; height: 410px; margin: 10px 0">
              <div style="
              width: 49%;
              float: left;
              margin-right: 1%;
              background: #fff;
              height: 410px;
              padding: 24px 15px;
            ">

                <!-- _波形图 -->
                <!-- _折线图 -->
                <div>
                  <div ref="lineChart" style="width: 100%; height: 400px"></div>
                  <!-- <button @click="updateData">更新数据</button> -->
                </div>






              </div>
              <div style="width: 50%; height: 410px; float: left; background: #fff">
                <div style="height: 40px; padding: 15px 15px 15px 15px">

                  <!-- _echarts柱状图 -->
                  <div>
                    <!-- <div ref="chart" style="width: 640px; height: 400px;"></div> -->
                    <div ref="chart" style="width: 100%; height: 400px;"></div>
                  </div>
                  <!-- <button @click="updateData" style="margin: 24px;">更新数据</button> -->

                  <!-- <span
                style="
                  font-size: 16px;
                  font-weight: bold;
                  float: left;
                  color: rgb(51, 51, 51);
                "
                >订单趋势</span
              > -->
                  <!-- <el-button
                size="mini"
                class="trend"
                :class="{ default: show == 3 }"
                @click="queryYear"
                >本年</el-button
              >
              <el-button
                class="trend"
                size="mini"
                :class="{ default: show == 2 }"
                style="border-right: 1px solid #8f8f8f"
                @click="queryLastMonth"
                >上月</el-button
              >
              <el-button
                size="mini"
                class="trend"
                :class="{ default: show == 1 }"
                style="border-right: 1px solid #8f8f8f"
                @click="queryMonth"
                >本月</el-button
              > -->
                </div>
                <div id="lineChart3" style="width: 0px; height: 0px" />
                <!-- <div id="lineChart3" style="width: 100%; height: 340px" /> -->
              </div>
            </div>

          </el-main>


          <!-- 右侧内容 -->



        </el-container>
        <!-- _图表 -->
        <!-- <el-table :data="tableData" style="width: 100%;" height="100%"> -->

        <!-- <el-table :data="tableData" style="width: calc(100% - 20px);">
        <el-table-column prop="sort" label="序号" width="100"></el-table-column>
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="number" label="工号" width="180"></el-table-column>
        <el-table-column prop="number" label="职位" width="180"></el-table-column>
        <el-table-column prop="number" label="部门" width="180"></el-table-column>
        <el-table-column prop="number" label="师傅" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table> -->


        <!-- _进度条 -->
        <!-- <div class="block">
        <el-slider
          v-model="value"
          show-input>
        </el-slider>
      </div> -->

        <!-- _抽屉 -->
        <el-radio-group v-model="direction">
          <!-- <el-radio label="ltr">从左往右开</el-radio> -->
          <!-- <el-radio label="rtl">从右往左开</el-radio> -->
          <!-- <el-radio label="ttb">从上往下开</el-radio> -->
          <!-- <el-radio label="btt">从下往上开</el-radio> -->
        </el-radio-group>

        <el-button @click="drawer = true" type="primary" style="position: fixed;top: 40%;right: 0px;z-index: 999;">
          <div style="padding-bottom: 12px;">报</div>
          <div>障</div>
        </el-button>

        <!-- <el-drawer title="" :visible.sync="drawer" :direction="direction" :before-close="handleClose"> -->
        <el-drawer :visible.sync="drawer" :direction="direction">
          <div style="margin: 0 24px;">
            <div
              style="width: 100%; height: 200px; border-radius: 5px; margin: 10px 0; padding: 10px 10px; background: #fff; ">
              <span style="margin: 20px 10px; font-size: 16px; font-weight: bold">系统负责人</span>
              <div style="
                    padding: 10px 10px;
                    height: calc(100% - 26px);
                    font-size: 16px;
                    color: rgb(153, 153, 153);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                  ">
                <div>
                  <span style="float: left;">IT：</span>
                  <span style="float: right;"></span>
                </div>
                <!-- <div>
                    <span style="float: left;">IT：王小明</span>
                    <span style="float: right;">13484759748</span>
                  </div>
                  <div>
                    <span style="float: left;">IT：王小明</span>
                    <span style="float: right;">13484759748</span>
                  </div> -->
              </div>
            </div>
            <!-- _保障 -->
            <div style="
                  width: 100%;
                  height: 200px;
                  border-radius: 5px;
                  margin: 10px 0px 0px;
                  padding: 10px 10px 0px;
                  background: #fff;
                ">
              <span style="margin: 5px 10px; font-size: 16px; font-weight: bold">报障</span>
              <div style="
                    padding: 10px 20px;
                    font-size: 14px;
                    color: rgb(153, 153, 153);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  ">
                <!-- <el-image :src="baozhang" width="25px" height="25px" /> -->
              </div>
            </div>
          </div>
        </el-drawer>




      </div>
    </div>

    <div v-if="systom.APS == 1">
      <indexAps v-if="$store.state.user.systom == 'APS'"></indexAps>
    </div>


  </div>
</template>

<script>

import global from '@/global.js'
import indexAps from './indexNew.vue'
import echarts from 'echarts'
// import one from "@/assets/imgs/img10.png";
// import two from "@/assets/imgs/img11.png";
// import three from "@/assets/imgs/img12.png";
// import four from "@/assets/imgs/img13.png";
import one from "@/assets/imgs/c_1.png";
import two from "@/assets/imgs/c_2.png";
import three from "@/assets/imgs/c_3.png";
import four from "@/assets/imgs/c_4.png";
// import more from "@/assets/imgs/more.png";

import img1 from "@/assets/icons/pzch.png";
import img2 from "@/assets/icons/OQC.png";
import img3 from "@/assets/icons/qjtb.png";
import img4 from "@/assets/icons/sscl.png";
import img5 from "@/assets/icons/tlbg.png";
import img6 from "@/assets/icons/sscl.png";
import img7 from "@/assets/icons/zzkc.png";
import img8 from "@/assets/icons/zzcg.png";
import img9 from "@/assets/icons/设备台账.png";
// import img1 from "@/assets/imgs/img1.png";
// import img2 from "@/assets/imgs/img2.png";
// import img3 from "@/assets/imgs/img3.png";
// import img4 from "@/assets/imgs/img4.png";
// import img5 from "@/assets/imgs/img5.png";
// import img6 from "@/assets/imgs/img6.png";
// import img7 from "@/assets/imgs/img7.png";
// import img8 from "@/assets/imgs/img8.png";
import img10 from "@/assets/imgs/img9.png";
import baozhang from "@/assets/imgs/baozhang.png";
import { GetSystem } from "@/api/datalistQueue";
import CountTo from "vue-count-to";
import { mapGetters } from "vuex";
import { PoReport, SalesdeliverReport } from "@/api/index";
import {
  GetInterfaceError,
  GetInterfaceNumByMM,
  getMyWork,
  getDataList1
} from "@/api/datalistQueue";
import { toThousandFilter } from '@/filters';
export default {
  name: "/dashboard",
  components: {
    indexAps
  },
  data() {
    return {
      systom: global.systom,
      Search: {
        // 查询条件
        total: 0, // 总记录数
        pageSize: 13, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "01", // 表编号  根据Controller中对应的表编号 //更改
        jsWhere: "", // 自定义条件
        Status: 0,

      },
      // _抽屉
      drawer: false,
      direction: 'rtl',

      // _table表格
      tableData: [{
        sort: '1',
        date: '2016-05-02',
        name: '王小虎',
        number: '397683',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        sort: '2',
        date: '2016-05-04',
        name: '王小虎',
        number: '397683',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        sort: '3',
        date: '2016-05-01',
        name: '王小虎',
        number: '397683',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        sort: '4',
        date: '2016-05-03',
        name: '王小虎',
        number: '397683',
        address: '上海市普陀区金沙江路 1516 弄'
      }
      ],


      value: 0,  // _slider滑块
      // _echarts柱状图
      chartData: {
        title: {
          text: '出货数量', // 设置标题文本
          textStyle: {
            fontWeight: 'bold',
            fontSize: '16'
          },
        },
        xAxis: {
          type: 'category',
          data: ['2月', '3月', '4月', '5月', '6月', '7月'],
        },
        yAxis: {
          type: 'value',
          // 横向指示线
          splitLine: {
            show: true,
            lineStyle: {
              color: '#dcdcdc',
              type: 'dashed'
            }
          },
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110],
          type: 'bar',
          barWidth: 30,
          color: '#66ccff',

        }],
      },

      // _折线图 value
      chartLineData: {
        title: {
          text: '计划/完工数量',
          textStyle: {
            fontWeight: 'bold',
            fontSize: '16'
          },
        },
        legend: {
          data: ['计划数量', '完工数量']
        },
        xAxis: {
          type: 'category',
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#999999',
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#666666',
              fontSize: 12,
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#233653',
            },
          },
          axisTick: {
            show: false,

          },
          data: ['7-12', '7-13', '7-14', '7-15', '7-16']
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#dcdcdc',
              type: 'dashed'
            }
          },
        },
        series: [
          {
            name: '计划数量',
            data: [100, 200, 150, 100, 180],
            type: 'line',
            // areaStyle: {
            //   color: gradientColor // 应用渐变色作为区域填充色
            // }
            lineStyle: {
              normal: {
                color: '#6D73F1' // 设置折线颜色为蓝色
              }
            },
            areaStyle: {
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#00eaff30',
                    },
                    {
                      offset: 0.6,
                      color: '#00eaff20',
                    },
                    {
                      offset: 1,
                      color: '#00eaff10',
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            name: '完工数量',
            data: [180, 100, 160, 280, 60],
            type: 'line',
            // areaStyle: {
            //   color: gradientColor // 应用渐变色作为区域填充色
            // }
            lineStyle: {
              normal: {
                color: '#FF8F89' // 设置折线颜色为蓝色
              }
            },
            areaStyle: {
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#ff974c30',
                    },
                    {
                      offset: 0.6,
                      color: '#ff974c20',
                    },
                    {
                      offset: 1,
                      color: '#ff974c10',
                    },
                  ],
                  false
                ),
              },
            },
          },
        ]
      },



      img9: img9,
      baozhang: baozhang,
      head: [
        // { label: "代办事项", img: three, number: "" },
        // { label: "标题名称", img: two, number: "" },
        // { label: "标题名称", img: one, number: "" },
        // { label: "标题名称", img: four, number: "" },
        // { label: "代办事项", img: one, number: "" , color: 'linear-gradient(to right, #46a6ff, #74bcff)'},
        // { label: "消息通知", img: two, number: "" , color: 'linear-gradient(to right, rgb(109 115 241), rgb(148 157 224))' },
        // { label: "标题名称", img: three, number: "" , color: 'linear-gradient(to right, rgb(167 116 235), rgb(202 116 255))' },
        // { label: "标题名称", img: four, number: "" , color: 'linear-gradient(to right, rgb(255 143 137), rgb(239 189 160))' },
        { label: "待办事项", img: one, number: "", path: "/Common/MyWork", color: '#46a6ff' },
        { label: "消息通知", img: two, number: "", path: "/Common/MyMessage", color: 'rgb(109 115 241)' },
        { label: "", img: three, number: "", color: 'rgb(167 116 235)' },
        { label: "", img: four, number: "", color: 'rgb(255 143 137)' },
      ],
      head2: [
        { label: "销售订单", img: img1, path: "" },
        { label: "采购订单", img: img2, path: "" },
        { label: "生产订单", img: img3, path: "" },
        { label: "发货订单", img: img4, path: "" },
        { label: "采购入库", img: img5, path: "" },
        { label: "生产入库", img: img6, path: "" },
        { label: "生产出库", img: img7, path: "" },
        { label: "收款订单", img: img8, path: "" },
        { label: "付款订单", img: img9, path: "" },
      ],
      totalAsset: "0.00", // 总资产
      totalAmount: "0.00", // 库存总额
      accountBalance: "", // 账户余额
      inventoryAmount: "0.00", // 库存余额
      fixedAssets: "0.00", // 固定资产
      receivableDebt: "0.00", // 应收欠款
      dealDebt: "0.00", // 应付欠款
      show: 1,
      systems: [],
      interfaceError: [],
      chart: null,
      chart2: null,

    };
  },
  computed: {
    ...mapGetters(["menus"]),
  },
  mounted() {

    // if(systom.ERP==1){

    // }
    // alert(this.systom)
    // this.drawLine();
    this.$nextTick(() => {
    // setTimeout(() => {
      this.initChart();

    // }, 500)

    });
    this.getDataList();
    // _echarts柱状图
    this.createChart();
    // _echarts波形图
    // this.createLineChart();

    // 折线图
    // this.chart = echarts.init(this.$refs.chart);
    this.renderChart();

  },
  created() {

    let data = this.menus;
    data.forEach((m) => {
      if (m.path == "/MesSales") {

        m.children.forEach((n) => {

          if (n.path == "SOrderBill") {
            this.head2[0].path = "/MesSales/SOrderBill";
          }
        });
      }

      if (m.path == "/Mespurchase") {
        m.children.forEach((n) => {
          if (n.path == "PUOrderBill") {
            this.head2[1].path = "/Mespurchase/PUOrderBill";
          }
        });
      }

      if (m.path == "/MesPo") {
        m.children.forEach((n) => {
          if (n.path == "PoOrdersBill") {
            this.head2[2].path = "/MesPo/PoOrdersBill";
          }
        });
      }

      if (m.path == "/MesSales") {
        m.children.forEach((n) => {
          if (n.path == "SalesdeliverBill") {
            this.head2[3].path = "/MesSales/SalesdeliverBill";
          }
        });
      }

      if (m.path == "/MesWH") {
        m.children.forEach((n) => {
          if (n.path == "PuInStockBill") {
            this.head2[4].path = "/MesWH/PuInStockBill";
          }
        });
      }

      if (m.path == "/MesWH") {
        m.children.forEach((n) => {
          if (n.path == "PoInStockBill") {
            this.head2[5].path = "/MesWH/PoInStockBill";
          }
        });
      }


      if (m.path == "/MesWH") {
        m.children.forEach((n) => {
          if (n.path == "PoOutStockBill") {
            this.head2[6].path = "/MesWH/PoOutStockBill";
          }
        });
      }


      if (m.path == "/MesAcc") {
        m.children.forEach((n) => {
          if (n.path == "AccCollectionMoneyOrderBill") {
            this.head2[7].path = "/MesAcc/AccCollectionMoneyOrderBill";
          }
        });
      }

      if (m.path == "/MesAcc") {
        m.children.forEach((n) => {
          if (n.path == "AccPaymentMoneyOrderBill") {
            this.head2[8].path = "/MesAcc/AccPaymentMoneyOrderBill";
          }
        });
      }
    });
  },
  methods: {

    handleClick(row) {
      console.log(row);
    },

    getStyle(index) {
      console.log(this.head);
      console.log(this.head[1].color);
      console.log(index);
      const myColor = this.head[index].color
      return {
        // background: 'linear-gradient(to right, #46a6ff, #74bcff)',
        background: myColor,
        color: '#ffffff'
      }
    },

    // _折线图
    async renderChart() {


      const ressss = await PoReport({ data: "" });


      this.chartLineData.xAxis.data = ressss.MonthDate;
      this.chartLineData.series[0].data = ressss.InwhQty;
      this.chartLineData.series[1].data = ressss.PlanQty;


      const chartDom = this.$refs.lineChart;
      this.myChart = echarts.init(chartDom);
      this.myChart.setOption(this.chartLineData)
      // 渲染图表
      // this.chart.setOption(option);
    },

    // _echart柱状图
    async createChart() {

      const resss = await SalesdeliverReport({ data: "" });

      this.chartData.xAxis.data = resss.MonthDate;
      this.chartData.series[0].data = resss.Qty;
      const chartDom = this.$refs.chart;
      this.myChart = echarts.init(chartDom);
      this.updateChart();
    },
    updateChart() {



      this.myChart.setOption(this.chartData);
    },
    updateData() {
      // 模拟更新数据
      // const newData = [80, 150, 100, 120, 90, 200];
      const newData = this.chartData.series[0].data.reverse();
      this.chartData.series[0].data = newData;
      this.updateChart();
    },
    // createChart() {
    //   const chartDom = this.$refs.chart;
    //   const myChart = echarts.init(chartDom);

    //   const option = {
    //     title: {
    //       text: '柱状图示例',
    //     },
    //     xAxis: {
    //       type: 'category',
    //       data: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6'],
    //     },
    //     yAxis: {
    //       type: 'value',
    //     },
    //     series: [{
    //       data: [120, 200, 150, 80, 70, 110],
    //       type: 'bar',
    //     }],
    //   };
    // _波形图
    createLineChart() {
      const lineChartDom = this.$refs.lineChart;
      const lineChart = echarts.init(lineChartDom);

      // 模拟波形图数据
      // const lineData = [];
      // for (let i = 0; i <= 360; i++) {
      //   const x = i;
      //   const y = Math.sin((i * Math.PI) / 180);
      //   lineData.push([x, y]);
      // }
      // this.chartlineData.series[0].data = lineData;

      // const lineOption = {
      //   title: {
      //     text: '波形图示例',
      //   },
      //   xAxis: {
      //     type: 'value',
      //     min: 0,
      //     max: 360,
      //   },
      //   yAxis: {
      //     type: 'value',
      //     min: -1,
      //     max: 1,
      //   },
      //   series: [
      //     {
      //       type: 'line',
      //       data: lineData,
      //       smooth: true,
      //     },
      //   ],
      // };

      // lineChart.setOption(lineOption);
      lineChart.setOption(this.lineData);
    },


    //   myChart.setOption(option);
    // },

    // 跳转至代办页面
    toPage(path) {
      this.$router.push({
        path: path,
      });
    },
    // 常用工能跳转至代办页面
    toPage2(path) {
      if (path) {
        this.$router.push({
          path: path,
        });
      } else {
        this.$message.error("您没有查看权限！")
      }
    },
    // 查询生产统计本月
    queryMonth: function () {
      this.show = 1;
    },
    // 查询生产统计上月
    queryLastMonth: function () {
      this.show = 2;
    },
    // 查询生产统计本年
    queryYear: function () {
      this.show = 3;
    },
    async getSystem() {
      // 获取列表数据，通用

      const res = await GetSystem({});

      this.systems = res.data.Table;

      console.log(this.systems);
    },
    async getInterfaceError() {
      const res = await GetInterfaceError({});
      this.interfaceError = res.data.Table;
    },

    initChart() {
      var echarts = require("echarts");
      this.chart = echarts.init(document.getElementById("lineChart3"));
      this.setOptions(this.systems);
      this.chart2 = echarts.init(document.getElementById("lineChart"));
      this.setOptions2(this.interfaceError);
    },

    setOptions2(interfaceError) {
      this.chart2.setOption({
        title: {
          text: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "天星",
            "方振",
            "星星",
            "浩云",
            "快鸟",
            "京东",
            "天猫",
            "阿里云",
          ],
        },
        series: [
          {
            name: "费用",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 11398.5, name: "天星" },
              { value: 19404.5, name: "方振" },
              { value: 209127, name: "星星" },
              { value: 291000, name: "浩云" },
              { value: 845, name: "快鸟" },
              { value: 416446.9, name: "京东" },
              { value: 125800, name: "天猫" },
              { value: 25100, name: "阿里云" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    setOptions(systems) {
      this.chart.setOption({
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["2018年", "2019年"],
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
          },
        },
        series: [
          {
            name: "2018年",
            type: "line",
            data: [
              436.9,
              746.3,
              370.6,
              1396.2,
              717.9,
              670.5,
              887.5,
              991.5,
              1435.6,
              973,
              993.4,
              843.9,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "2019年",
            type: "line",
            data: [
              687.5,
              253.9,
              347.2,
              671.1,
              513.9,
              412.4,
              276.4,
              532.3,
              792.9,
              710.7,
              1400.1,
              1017.7,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
                /* {name: '年最低', value: -2, xAxis: 1, yAxis: -1.5} */
              ],
            },
            markLine: {
              data: [
                { type: "average", name: "平均值" },
                [
                  {
                    /* symbol: 'none',
                                x: '90%',
                                yAxis: 'max' */
                  },
                  {
                    /* symbol: 'circle',
                                label: {
                                    position: 'start',
                                    formatter: '最大值'
                                },
                                type: 'max',
                                name: '最高点' */
                  },
                ],
              ],
            },
          },
        ],

        /* title: {
                text: '订单趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['2018年', '2019年']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月' ,'8月' , '9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '2018年',
                    type: 'line',
                    stack: '总量',
                    data: [436.9, 746.3, 370.6, 1396.2, 717.9, 670.5, 887.5, 991.5, 1435.6, 973, 993.4,	843.9]
                },
                {
                    name: '2019年',
                    type: 'line',
                    stack: '总量',
                    data: [687.5, 253.9, 347.2, 671.1, 513.9, 412.4, 276.4, 532.3, 792.9, 710.7, 1400.1, 1017.7]
                }
            ] */
      });
    },
    async getDataList() {
      // 获取列表数据，通用
      const res = await getMyWork({ data: "" });
      this.head[0].number = JSON.parse(res.data1).Data.total;

      const ress = await getDataList1({ data: JSON.stringify(this.Search) });

      this.head[1].number = ress.data.Table1[0].RecordCount;


    },
    drawLine() {
      var echarts = require("echarts");
      const myCharts = echarts.init(document.getElementById("lineChart"));
      const myCharts2 = echarts.init(document.getElementById("lineChart2"));
      const myCharts3 = echarts.init(document.getElementById("lineChart3"));
      var option1 = {
        color: ["#ff81cb", "#87cefa"],
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "horizontal",
          center: "center",
          data: ["已入库", "未入库"],
        },
        series: [
          {
            name: "已入库",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 83.7, name: "已入库" },
              { value: 26.3, name: "未入库" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      var option2 = {
        color: ["#032f5e", "#f01c70"],
        legend: {
          data: ["收入", "支出"],
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1日",
              "4日",
              "7日",
              "11日",
              "15日",
              "19日",
              "23日",
              "27日",
              "30日",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "收入",
            type: "bar",
            data: [3000, 4900, 3670, 2320, 2560, 7670, 1356, 1622, 5260],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "支出",
            type: "bar",
            data: [2600, 1900, 3900, 2640, 1287, 2707, 1756, 1822, 4870],
            markPoint: {
              data: [
                { name: "月最高", value: 6400, xAxis: 10, yAxis: 6400 },
                { name: "月最低", value: 1260, xAxis: 10, yAxis: 6400 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      var option3 = {
        color: ["#87cefc", "#da70d5"],
        legend: {
          data: ["已达成", "未达成"],
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1日",
              "4日",
              "7日",
              "11日",
              "15日",
              "19日",
              "23日",
              "27日",
              "30日",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "已达成",
            type: "bar",
            data: [
              30000,
              43000,
              38670,
              12320,
              22560,
              37670,
              41356,
              51622,
              25260,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "未达成",
            type: "bar",
            data: [12800, 9900, 11900, 8640, 6287, 5707, 11756, 7822, 14870],
            markPoint: {
              data: [
                { name: "月最高", value: 6400, xAxis: 10, yAxis: 6400 },
                { name: "月最低", value: 1260, xAxis: 10, yAxis: 6400 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      myCharts.setOption(option1);
      myCharts2.setOption(option2);
      myCharts3.setOption(option3);
    },
  },
};
</script>
<style scoped lang="scss">
.showHome /deep/ .box-card {
  /* height: 111px; */
  height: 100%;
  float: left;
  width: 24%;
  margin-right: 1%;
  padding-top: 15px;
}

.showHome /deep/ .el-main {
  overflow: hidden;  
}

.showHome /deep/ .box-card2 {
  height: 58px;
  /* width: 25%; */
  width: 12.5%;
  float: left;
  padding: 0px 20px;
  margin-top: 24px;
}

.showHome /deep/ .el-card__body {
  padding: 0;
}

.bodyContent a {
  width: 100%;
  height: 58px;
  cursor: pointer;
  align-items: center;
  display: flex;
}

.asideRight {
  font-family: impact;
  font-weight: bold;
  font-size: 16px;
  color: red;
  float: right;
}

.box-card .head {
  /* background: #fff; */
  border-radius: 5px;
  color: #fff;
}

.box-card /deep/ .el-image {
  width: 45px;
  height: 45px;
}

.balance {
  height: 30px;
}

.bodyContent .el-image {
  width: 32px;
  height: 36px;
  margin-top: 15px;
}

/* _标题图标栏 */
.box-card img {
  width: 100%;
  height: 100%;
}

.box-card .span {
  font-family: impact;
  font-weight: bold;
  clear: both;
  font-size: 26px;
  text-align: center;
  width: 82%;
  /* color: #676a6c; */
  /* color: #ffffff; */
  color: transparent;
}

.showHome /deep/ .el-main {
  padding: 0;
}

.default {
  color: #0a7dfa !important;
}

.dot {
  float: inherit;
  max-width: 12px;
  min-width: 12px;
  max-height: 12px;
  min-height: 12px;
  border-radius: 50%;
  margin: 5px 8px;
  float: left;
  display: block;
  margin-left: 5px;
}

.trend {
  float: right;
  width: 50px;
  background: #fff;
  color: #8f8f8f;
  border: hidden;
  cursor: pointer;
  border-radius: 0%;
  margin-top: -5px;
}

.showHome /deep/ .el-aside {
  padding: 0;
  /* background-color: #fff; */
}

.asideOne {
  /* height: 45px; */
  /* padding: 15px 5px; */
  font-size: 14px;
  /* color: rgb(153, 153, 153); */
  color: #999999;
  font-family: MicrosoftYaHei;
  /* border-bottom: 1px solid #f5f5f5; */
}

/* .asideOne span{
  height: 45px;
  line-height: 45px;
} */

/* _表头颜色 */
.el-table /deep/ th {
  /* background-color: #ffffff !important;  */
  background-color: transparent !important;
  /* 修改为你想要的底色 */
}

.el-table /deep/ tr {
  height: 72px;
}

/* _抽屉按钮 */
.el-button--medium {
  border-radius: 4px 0 0 4px;
  background-color: #1890FF;
  padding: 24px 16px;
  font-size: 16px;
  margin: 0;
}

/* _大盒子 */
.app-container {
  /* padding: 20px; */
  padding-right: 0;
}

/* 待办通知 */
/* .head-item div:nth-child(1){
  background: linear-gradient(to right, #46a6ff, #74bcff);
  background: #74bcff;
} */
/* .head-item div:nth-child(2){
  background: red;
  background-color: red;
} */
</style>
